<template>
  <el-dropdown trigger="click" class="lang-dropdown">
    <span class="el-dropdown-link">
      {{ getCurrentLanguageLabel }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item 
          v-for="item in languages" 
          :key="item.value" 
          @click="handleLanguageChange(item.value)"
          :class="{ 'is-active': currentLanguage === item.value }"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { languages } from '@/locales';

interface Props {
  currentLanguage: string;
}

interface Emits {
  (e: 'update:currentLanguage', value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 获取当前语言标签
const getCurrentLanguageLabel = computed(() => {
  const lang = languages.find(item => item.value === props.currentLanguage);
  return lang ? lang.label : "English";
});

// 切换语言
const handleLanguageChange = (lang: string) => {
  emit('update:currentLanguage', lang);
};
</script>

<style scoped>
.lang-dropdown {
  .el-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #606266;
    font-size: 14px;
  }
}

:deep(.is-active) {
  color: var(--el-color-primary);
  font-weight: bold;
}
</style> 